<template>
  <div>
    <project-item ref="projectItem" class="project" @currentProjectChange="currentProjectChange" />
    <el-form ref="searchForm" class="searchForm" :inline="true" :model="params" label-position="right" label-width="auto">
      <div class="filters-wrap clearfix">
        <div class="filters-action">
          <!-- <el-button type="primary" :loading="gridOptions.loading" @click="SetStorage">查询</el-button>
          <el-button @click="removeStorage">重置</el-button> -->
          <el-button size="small" type="primary" :loading="gridOptions.loading" @click="customQuery()">查询</el-button>
          <el-button size="small" @click="customClear()">重置</el-button>
          <!-- <div class="search-more-but">
            <el-button v-if="!formHidden" type="primary" @click="moreForm">更多</el-button>
            <el-button v-else type="primary" @click="moreForm">收回</el-button>
          </div> -->
        </div>
        <div ref="filtersArea" class="filters-area clearfix">
          <el-row>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="时间" prop="time">
                <el-date-picker
                  v-model="params.time"
                  size="small"
                  clearable
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  style="width: 100%"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                  <div slot="footer" class="hidden-confirm-button">
                    这里可以放置自定义内容，但是确认按钮会被隐藏
                  </div>
                </el-date-picker>
              </el-form-item>
            </el-col>
            <!-- <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="工厂产线" prop="orderCode">
                <el-cascader
                  v-model="params.factory_production"
                  size="small"
                  placeholder="工厂产线"
                  :options="factoryLines"
                  @change="factoryLinesHandleChange"
                />
              </el-form-item>
            </el-col> -->
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="机台" prop="machine">
                <el-select
                  v-model="params.machine"
                  size="small"
                  multiple
                  filterable
                  remote
                  reserve-keyword
                  placeholder="请选择机台"
                  :remote-method="remoteMethod"
                  :loading="machineLoading"
                >
                  <el-option
                    v-for="item in machine"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="芯片ID" prop="chip">
                <el-input v-model.trim="params.chip" size="small" placeholder="请输入芯片ID" @keyup.enter.native="query()" />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="KEY" prop="key">
                <el-input v-model.trim="params.key" size="small" placeholder="请输入KEY" @keydown.enter.native="query()" />
              </el-form-item>
            </el-col>
            <!-- <template v-if="formHidden" class="clearfix formHidden" /> -->
          </el-row>
        </div>
      </div>
    </el-form>
    <div class="page-grid">
      <vxe-grid id="xGrid" ref="xGrid" :toolbar-config="tableToolbar" column-key v-bind="gridOptions" :height="tableHei" header-align="center">
        <template #toolbar_btn="">
          <!-- <div class="head_btn">
            <el-button @click="exportXls('Record')">导出</el-button>
          </div> -->
        </template>
        <template #pager>
          <vxe-pager
            :layouts="[
              'Sizes',
              'PrevJump',
              'PrevPage',
              'Number',
              'NextPage',
              'NextJump',
              'FullJump',
              'Total',
            ]"
            :current-page.sync="gridOptions.pagerConfig.currentPage"
            :page-size.sync="gridOptions.pagerConfig.pageSize"
            :total="gridOptions.pagerConfig.total"
            @page-change="handlePageChange"
          />
        </template>
      </vxe-grid>
    </div>
  </div>
</template>

<script>
import projectItem from '@/views/companents/projectItem/other_index.vue'
import dayjs from 'dayjs'
import { VxeListMixin } from '@/mixins/VxeListMixin'

export default {
  components: {
    projectItem
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  mixins: [VxeListMixin],
  data() {
    return {
      queryDate: '', // 查询日期
      highlightDates: [], // 需要高亮的日期时间戳list
      pickerOptions: { shortcuts: [{
        text: '红色圆点标识有数据'
      }]
      }, // 配置对象
      queryYear: new Date().getFullYear().toString(), // 当前年份
      dateViewable: [], // 后台返回日期list
      list: null,
      listLoading: true,
      machineLoading: false,
      tableHeight: 330,
      url: {
        queryList: this.$api.RecordController.SpecialSearch
      },
      params: {
        page: 1,
        pageSize: 20,
        time: [],
        machine: [],
        chip: '',
        key: '',
        projectId: '5'
      },
      factoryLines: [],
      machine: [],
      tableToolbar: {
        perfect: true,
        refresh: false,
        zoom: false,
        custom: false,
        slots: {
          buttons: 'toolbar_btn'
        }
      },
      columns: [
        { type: 'seq', title: '序号', width: 70, fixed: 'left', align: 'right' },
        { field: 'chip', title: 'CHIP ID', width: 120 },
        { field: 'handlerId', title: 'HANDLER ID', minWidth: 80 },
        { field: 'machine', title: 'TESTER', width: 120 },
        { field: 'hostname', title: 'HOSTNAME', width: 120 },
        { field: 'nodeKey', title: 'KEY', minWidth: 100 },
        { field: 'value', title: 'VALUE', minWidth: 150 },
        { field: 'testProgram', title: 'TESTFLOW', minWidth: 80 }
        // { field: 'time', title: 'Site Number', width: 180 },
        // { field: 'factory', title: 'USER_TXT', width: 120 }
        // { field: '产线', title: 'Host Controller ID', width: 120 }
      ]
    }
  },
  watch: {
    params: {
      handler(newValue, oldValue) {
        if (newValue.time == null) {
          newValue.time = []
        }
      },
      deep: true
    }
  },
  mounted() {

  },
  created() {
    this.gridOptions.columns = this.columns
    // 产线机台接口
    // this.getFactoryLines()
    this.getMachine()
  },
  methods: {
    async init(projectId) {
      this.projectId = projectId
      this.params.projectId = projectId.toString()
      this.$nextTick(() => {
        this.$refs.projectItem.init(projectId)
      })
    },
    customQuery() {
      const that = this
      this.url.query = this.url.queryList
      this.query((res) => {
        that.dateViewable = res.effectiveDate
        this.setpickdate()
      })
    },
    async customClear() {
      this.initParams()
      await this.customQuery()
    },
    initParams() {
      this.params = {
        page: 1,
        pageSize: 20,
        time: [],
        machine: [],
        chip: '',
        key: ''
      }
      this.params.projectId = this.projectId.toString()
    },
    currentProjectChange(projectId) {
      this.initParams()
      // 访问当前项目获取到的projectId
      this.projectId = this.$store.getters.projectId
      this.params.projectId = this.projectId.toString()
      this.customQuery()
    },
    factoryLinesHandleChange(value) {

    },
    getFactoryLines() {
      this.$fetchData(this.$api.RecordController.getFactoryLine, null, 'get').then(res => {
        this.factoryLines = res
      })
    },
    getMachine() {
      this.$fetchData(this.$api.RecordController.getMachine, null, 'get').then(res => {
        this.machine = res
      })
    },
    // 机台搜索
    remoteMethod() {

    },
    setpickdate() {
      this.highlightDates = this.dateViewable.map(r => {
        const timestamp = dayjs(r).valueOf()
        return timestamp
      })
      this.isQuerydate() // 修改样式
    },
    // 自定义样式
    isQuerydate() {
      this.pickerOptions.cellClassName = (time) => {
        if (this.highlightDates.includes(time.getTime())) {
          return 'times2'
        }
      }
    }

  }
}
</script>

<style lang="scss">
.times2 >div span::after{
  content: "";
  display:block;
  width: 10px;
  height: 10px;
  background: red;
  position:absolute;
  border-radius: 10px;
  left: 50%;
  transform: translateX(-50%);
}
.el-date-table td.today span{
    // color: white;
    // background-color: red;
}

.el-date-table td.end-date span, .el-date-table td.start-date span{
  color: white;
    background-color: bule;
}

.el-picker-panel [slot=sidebar]+.el-picker-panel__body, .el-picker-panel__sidebar+.el-picker-panel__body{
  margin-top: 20px;
}

.el-picker-panel__body-wrapper {
  height: 108%;
  border: 1px solid #e4e4e4;
  width: 100%;
}
.el-date-picker.has-sidebar {
  width: 330px !important;
}
.el-picker-panel__sidebar {
  right: 0px;
  top: -340px !important;
  background-color: transparent;
  display: flex;
}
.el-picker-panel__body {
  padding-bottom: 10px;
  margin-left: 0px !important;
}
.el-picker-panel [slot=sidebar], .el-picker-panel__sidebar{
  width: auto;
}
.el-picker-panel__shortcut {
  padding-left: 20px;
  font-size: 12px;
  color: #858282;
}
.el-picker-panel__shortcut::after{
  content: "";
    display: block;
    width: 6px;
    height: 6px;
    background: red;
    border-radius: 6px;
    margin-left: -10px;
    margin-top: -16px;
}
.head_btn{
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    margin: 0 10px;
}
</style>

